<template>
  <div class="login_flex" :style="imgStyle">
    <div class="login_component_container">
      <login-component />
    </div>
  </div>
</template>
<script>
import LoginComponent from "../components/login/LoginComponent.vue";
export default {
  name: "LoginView",
  components: { LoginComponent },
  data(){
    return{
      configLogin:{},
      collegeId:null,
      imgStyle:{backgroundImage:require('@/assets/img/campus_login.jpg')},
      http: this.$fetchutil,
    }
  },
  created(){
    this.getSiteConfig()
  },
  methods:{
    getSiteConfig(){
      this.collegeId=this.getQueryVariable('collegeId')
      if (this.collegeId==null) return
      this.http.get('/browse/config/site-config/'+this.collegeId,(resp)=>{
        if(resp.code!=200||resp.data==null||resp.data.configLogin==null)return
        this.configLogin=JSON.parse(resp.data.configLogin)[0]
        this.imgStyle.backgroundImage='url('+this.configLogin.imgUrl+')'
        Object.keys(this.configLogin.imgStyle).forEach(key=>{
          this.imgStyle[key]=this.configLogin.imgStyle[key]
        })
      })
    },
    getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return null;
    },
  }
};
</script>
<style scoped>
.login_flex{
  display: flex;
  /* height: calc(100vh - 20px); */
  height: 100vh;
  align-items: center;
  background-size: 100%;
  background-image: url("~@/assets/img/campus_login.jpg");
}
.login_component_container{
  margin: auto 100px auto auto;
}
</style>